<template>
    <Card title="结算方式">
        <template #extra>
            <el-date-picker v-model="date" size="mini" @change="initFundSourceChart"/>
        </template>
        <div id="fundSourceChart" style="height: 100%;"/>
    </Card>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/views/dashboard/mixins/resize'
import Card from './Card.vue';
export default {
    mixins: [resize],
    components: {
        Card
    },
  data() {
    return {
        date: new Date(),
        chart: null
    }
  },
  computed: {},
  mounted() {
    this.initFundSourceChart()
  },
  methods: {
    // 初始化资金来源图表
    initFundSourceChart () {
        this.chart = echarts.init(document.getElementById('fundSourceChart', 'macarons'))
        this.chart.setOption({
            grid: {
                top: '10%',
                left: '2%',
                right: '2%',
                bottom: '3%',
                containLabel: true
            },
            dataset: {
                source: Array.from({length: 5}, (_, index) => {
                        if (index) {
                            return [['微信', '支付宝', '现金', '其他'][index - 1], Math.random() * 1000]
                        }  else {
                            return ['month', 'value']
                        }
                    })
            },
            series: {
                type: 'pie'
            }
        })
    }
  }
}
</script>

